<template>
	<div class="my">
		<div class="my-top">
			<top-header></top-header>
			<div class="display my-avatar-around" @click="guessGoLogin">
				<img src="@/assets/icon/icon_head@3x.png" class="my-avatar" />
				<div style="margin-left: 0.507246rem" class="my-name font-size-28">{{ user_name }}</div>
			</div>
			<div class="display my-order-around">
				<div class="display-col" v-for="(item, index) of listAvatar" :key="index">
					<img :src="item.img" class="img-40" />
					<div class="font-size-16" style="margin-top: 0.217391rem">{{ item.title }}</div>
				</div>
			</div>
		</div>
		<div class="display-col my-card-list">
			<div class="display my-card" v-for="(item, index) of list" :key="index" @click="handleGoPage(item.go)">
				<img :src="item.img" class="my-card-img" />
				<div class="display my-card-only">
					<div>{{ item.title }}</div>
					<div>></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import cookie from '@/utils/cookie';

export default {
	name: 'index',
	components: {
		TopHeader,
	},
	data() {
		return {
			list: [ //我的底部列表
				{ title: '收货地址', img: require('@/assets/icon/icon_address_24@3x.png'), go: '/address' },
				{ title: '我的客服', img: require('@/assets/icon/icon_service_24@3x.png'), go: '/serve' },
				{ title: '问题反馈', img: require('@/assets/icon/icon_feedback_24@3x.png'), go: '/problem' },
				{ title: '商务合作', img: require('@/assets/icon/icon_cooprate_24@3x.png'), go: '/together' },
				{ title: '关于我们', img: require('@/assets/icon/icon_aboutus_24@3x.png'), go: '/about' },
				{ title: '设置密码', img: require('@/assets/icon/mima@3x.png'), go: '/ChangePassword' },
				{ title: '退出登录', img: require('@/assets/icon/tuichu@3x.png'), go: '/Login' },
			],
			listAvatar: [ //订单列表
				{ title: '商城订单', img: require('@/assets/icon/icon_ticket_24@3x.png') },
				{ title: '门票订单', img: require('@/assets/icon/icon_live_24@3x.png') },
				{ title: '美食订单', img: require('@/assets/icon/icon_meal_24@3x.png') },
				{ title: '住宿订单', img: require('@/assets/icon/icon_mail_24@3x.png') },
			],
		};
	},
	computed: {
		user_name() { //名字
			return localStorage.getItem('token') ? '用户' + JSON.parse(cookie.get('userLogin')).phonenum : '游客'
		}
	},
	mounted() {
		if(!!localStorage.getItem('token')) {
			this.list[5].go = '/ChangePassword';
		} else {
			this.list[0].go = '/Login';
			this.list[2].go = '/Login';
			this.list[5].go = '/Login';
		}
	},
	methods: {
		guessGoLogin() { //游客点击头像部分跳往登录
			if(!localStorage.getItem('token')) {
				this.$router.push("/Login");
			}
		},
		handleGoPage(path) {
			if(path === '/Login') { //删除cookie
				localStorage.removeItem('token');
			}
			this.$router.push(path);
		},
	}
};
</script>

<style lang="scss" scoped>
.my {
	height: 100vh;
	background-color: #f9f9f9;
}
.my-card {
	font-size: 0.434783rem;
	color: #343434;
	padding: 0 0.434783rem;
	width: calc(100% - 0.869565rem);
	background-color: #ffffff;

	.my-card-only {
		border-bottom: #e8e8e8 0.024155rem solid;
		width: 100%;
		padding: 0.362319rem;
	}
	.my-card-img {
		width: 0.724638rem;
		height: 0.724638rem;
	}
}
.my-card-list :nth-child(3),
.my-card-list :nth-child(7) {
	.my-card-only {
		border: none;
	}
}
.my-card-list :nth-child(4) {
	margin-top: 0.410628rem;
}
.my-top {
	margin-bottom: 0.386473rem;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
}
.my-avatar-around {
	margin-bottom: 0.845411rem;
	display: flex;
	justify-content: flex-start;
	padding: 0 0.700483rem 0 0.700483rem;

	.my-avatar {
		border-radius: 50%;
		width: 1.449275rem;
		height: 1.449275rem;
	}
}

.my-order-around {
	padding: 0 0.57971rem .628019rem 0.57971rem;
}
</style>
